<template>
  <el-form ref="form" class="info-form" :model="form" label-width="80px">
    <el-form-item label="ID">
      <el-input v-model="form.id" disabled></el-input>
    </el-form-item>
    <el-form-item label="头像" prop="avatar">
      <el-input v-model="form.avatar"></el-input>
    </el-form-item>
    <el-form-item label>
      <el-avatar :size="50">
        <img :src="form.avatar" />
      </el-avatar>
      <upload-avatar :url.sync="form.avatar"></upload-avatar>
    </el-form-item>
    <el-form-item label="账号">
      <el-input v-model="form.username" disabled></el-input>
    </el-form-item>
    <el-form-item label="用户名">
      <el-input v-model="form.displayName"></el-input>
    </el-form-item>
    <el-form-item label="邮箱">
      <el-input v-model="form.email"></el-input>
    </el-form-item>
    <el-form-item label="手机号">
      <el-input v-model="form.phone"></el-input>
    </el-form-item>
    <el-form-item label="密码">
      <el-input v-model="form.password" type="password"></el-input>
    </el-form-item>
    <el-form-item label="注册时间">
      <el-input v-model="form.createdDateStr" disabled></el-input>
    </el-form-item>
    <el-form-item label="入职时间">
      <el-input v-model="form.entryDateStr" disabled></el-input>
    </el-form-item>
    <el-form-item label="更新时间">
      <el-input v-model="form.updateDateStr" disabled></el-input>
    </el-form-item>
    <el-form-item label="最后登录">
      <el-input v-model="form.lastLoginDateStr" disabled></el-input>
    </el-form-item>

    <!-- <el-form-item label="活动形式">
      <el-input v-model="form.desc" type="textarea"></el-input>
    </el-form-item> -->
    <el-form-item>
      <el-button type="primary" @click="onSubmit">保存</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
  import store from '@/store'
  import { formatTime } from '@/utils/formatDateTime'
  import { updateInfo } from '@/api/user'
  import UploadAvatar from '@/views/personnelManagement/userManagement/components/UploadAvatar.vue'
  export default {
    name: 'Info',
    components: { UploadAvatar },
    data() {
      return {
        form: {},
      }
    },
    created() {
      this.form = store.getters['user/account']
      this.form.createdDateStr = formatTime(this.form.createdDate)
      this.form.entryDateStr = formatTime(this.form.entryDate)
      this.form.lastLoginDateStr = formatTime(this.form.lastLoginDate)
      this.form.updateDateStr = formatTime(this.form.updateDate)
    },
    methods: {
      async onSubmit() {
        const { msg } = await updateInfo(this.form)
        this.$baseMessage(msg, 'success')
        store.dispatch('user/getUserInfo')
      },
    },
  }
</script>

<style scoped>
  .info-form {
    width: 600px;
  }
</style>
